<template>
	<div class="ompOrder">
	  <div class="orderRecord">
      <div class="menu_bar">
        <div class="deivceTop">
          <organization
            class="changeDep"
            :selectDepartment="curDepartment"
            @department_select="handleDepartment">
          </organization>
          <div class="changeMore"  :class="activestyle">
            <div @click="changeMore" style="width:49%;float:left;"><span style="font-size:20px;margin-right: 26px;" class="iconfont icon-shaixuan"></span></div>
            <div @click="changeGongdan" style="height:38px;width:50%;float:right;border-left: 1px rgba(204, 204, 204, 0.46) solid;line-height: 32px;">
              <iconSvg style=" margin-left: 28px;" name='工单' w="16px" h="16px"></iconSvg></div><!-- style="margin: 3px 6px;" -->
          </div>
          <div  v-focusable @click="backToHomepage" class="backTo">
             <span style="font-size:17px;color:#fff;" class="iconfont">&#xe668;</span>
            </div>
        </div>
        <div class="tab_wrapper">
          <tab default-color="#fff" active-color="#fff" bar-active-color="#456de6" :line-width="5" custom-bar-width="40px">
            <tab-item
              :selected="unprocessed"
              @on-item-click="tabClick(0)"
              style="background:background: rgb(34, 35, 63);"
              v-if="userActionMap['wechat_workSheetHomePage']['actions'].includes('wechat_workSheetHomePage:mange')">
              <span id="dclgd">待处理工单</span>
            </tab-item>
            <tab-item
              @on-item-click="tabClick(2)"
              style="background:background: rgb(34, 35, 63);"
              :selected="history">
              <span id="lsjlgd">历史工单记录</span>
            </tab-item>
          </tab>
        </div>
      </div>
      <div class="MoreDataP" v-if="showMore">
        <div class="deviceName">设备名称 <input type="text" placeholder="请输入设备名称" v-model="deviceName"></div>
        <div class="deviceCode">设备编号 <input type="text" placeholder="请输入设备编号" v-model="deviceCode"></div>
        <div class="deviceName">部件名称 <input type="text" placeholder="请输入部件名称" v-model="componentName"></div>
        <div class="deviceCode">部件编号 <input type="text" placeholder="请输入部件编号" v-model="componentCode"></div>
        <div class="deviceCode">工单编号 <input type="text" placeholder="请输入工单编号" v-model="workSheetNo"></div>
        <div>工单优先级</div>
        <div class="runStatusBtn">
          <button type="button" v-for="(each, index) in workSheetPriority" :class="{'active':indPriority === index, 'default':indPriority !== index}" @click="changePriority(index)">{{each}}</button>
        </div>
        <div>工单类型</div>
        <div class="runStatusBtn">
          <button type="button" v-for="(each, index) in workSheetType" :class="{'active':ind === index, 'default':ind !== index}" @click="changeBgc(index)">{{each}}</button>
        </div>
        <div v-if="historyShow">我参与的工单</div>
        <div class="runStatusBtn" v-if="historyShow">
          <button type="button" v-for="(each, index) in workSheetOfMine" :class="{'active':indMy === index, 'default':indMy !== index}" @click="changeMy(index)">{{each}}</button>
        </div>
        <div class="BtnGroup">
          <div class="btn-reset" @click="reset">重置</div>
          <div class="btn-over"  @click="success">完成</div>
        </div>
        <!-- <div class="mask" v-show="show3" @click="showVuePopup3(false)"></div> -->
      </div>
      <div class="number">共{{number}}条记录</div>
      <div  class="sw">
        <mescroll-vue :class="scrollName" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
        <x-table v-if="index === 0"  :cell-bordered="false" style="background-color:#fff;width:96%; margin: auto;table-layout: fixed;">
          <thead>
          <tr>
            <th style="text-align: left;">设备/部件</th>
            <th>工单类型</th>
            <th @click="sort('date', sort1, 1)">上报时间&ensp;<font-awesome-icon :icon="['fa','sort']" size="lg" /></th>
            <th style="text-align: right;">操作</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="(item, key) in workSheetList" :key="key">
              <td style="text-align: left;height:52px;" v-if="item.componentName">
                <ul>
                  <li style="line-height: 20px;color:#456de6;">{{item.deviceName}}</li>
                  <li style="line-height: 20px;margin-left: 8px;">{{item.componentName}}</li>
                </ul>
              </td>
             <td v-else style="text-align: left;height:54px;">{{item.deviceName}}</td>
              <td>
                <span v-if="item.workSheetType == 1">点巡检</span>
                <span v-else-if="item.workSheetType == 2">更换</span>
              </td>
              <td v-if="item.workSheetTime!=''">
                 <ul>
                  <li style="line-height: 20px;"> {{item.workSheetTime | formatDate1}}</li>
                  <li style="line-height: 20px;"> {{item.workSheetTime | formatDate2}}</li>
                </ul>
               </td>
              <td v-else>--</td>
              <td @click="workSheetDetail(item,type='unprocessed')" style="text-align: right;color:#456de6;">处理</td>
            </tr>
          </tbody>
        </x-table>

      <!-- </div>
      <div  class="xw">　　 -->
      　<x-table v-else :cell-bordered="false" style="background-color:#fff;width:96%; margin: auto; table-layout: fixed;">
          <thead>
            <tr>
              <th style="text-align: left;">设备/部件</th>
              <th>工单类型</th>
              <th style="margin-left:20px;" @click="sort('date', sort1, 1)">上报时间&ensp;<font-awesome-icon :icon="['fa','sort']" size="lg" /></th>
              <th style="text-align: right;">处理状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, key) in historyWorkSheetList" :key="key" @click="workSheetDetail(item,type='processed')">
               <td style="text-align: left;height:52px;" v-if="item.componentName">
                <ul style="text-align: left;" >
                  <li style="line-height: 20px;color:#456de6;">{{item.deviceName}}</li>
                  <li style="line-height: 20px;margin-left: 8px;">{{item.componentName}}</li>
                </ul>
              </td>
             <td v-else style="text-align: left;height:52px;">{{item.deviceName}}</td>
              <td>
                <span v-if="item.workSheetType == 1">点巡检</span>
                <span v-else-if="item.workSheetType == 2">更换</span>
                <span v-else-if="item.workSheetType == 3">提醒</span>
                <span v-else>未知类型</span>
              </td>
               <td  v-if="item.createTime!=''">
                 <ul>
                  <li style="line-height: 20px;"> {{item.createTime | formatDate1}}</li>
                  <li style="line-height: 20px;"> {{item.createTime | formatDate2}}</li>
                </ul>
               </td>
              <td v-else>--</td>
              <td style="text-align: right;">
                <span v-if="item.handleState == 1" style="color:red">未处理</span>
                <span v-if="item.handleState == 2" style="color:#456de6">已处理</span>
              </td>
            </tr>
          </tbody>
        </x-table>
        </mescroll-vue>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon, Tab, TabItem, XTable, Tabbar, TabbarItem, ButtonTab, ButtonTabItem} from 'vux';
import request from '../../config/request.js';
import DeviceSelected from "../common/device-selected-detail-device";
import Organization from "../common/organization"
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
  components: {
    Icon,
    Tab,
    TabItem,
    XTable,
    Tabbar,
    TabbarItem,
    ButtonTab,
    ButtonTabItem,
    DeviceSelected,
    Organization,
    MescrollVue,
  },
   data () {
    return {
      show:false,
      list: [],
      historyRecord: [],
      index: this.$route.query.index,
      changeBlack: 1,
      sortType: 'status',
      sort1: false,
      sort2: false,
      sort3: false,
      userActionMap:{},
      //展示部门列表
      showDep: false,
      //部门列表数据
      departments: ['一级部门', '二级部门', '三级部门'],
      radioValue: ['一级部门'],
      checkDep: '一级部门',
      //展示部门更多筛选
      showMore: false,
      checkMore:'筛选',
      departmentDetail: '',
      showSearch: '',
      workSheetType: ['全部','点巡检','更换'],
      workSheetPriority:['全部','一般','重要','紧急'],
      workSheetOfMine: ['全部','我提交的工单','完结的工单'],
      ind: 0,
      indPriority:0,
      indMy:0,
      show3: false,
      activestyle: '',
      unprocessedWorkSheet:[],
      unprocessed:true,
      history:false,
      userInfo:{},
      historyShow:false,

      curDepartment:{
        departmentName:'全企业',
        id:'0'
      },
      departmentId:0,
      deviceName:'',
      deviceCode:'',
      componentName:'',
      componentCode:'',
      workSheetNo:'',
      workSheetList:[],
      historyWorkSheetList:[],
      unfinishCatch:[],
      historyCatch:[],
      myWorkSheetList:[],
      mySubmitWorkSheet:[],
      myFinishedWorkSheet:[],
      allWorkSheet:[],
      list2:[],
      number:0,
      workSheetTotal:0,
      toDealWorkSheetNum:0,
      mySubmitWorkSheetNum:0,
      myFinishedWorkSheetNum:0,
      pageNum1:3,
      scrollName:'me_scroll',
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        that: this,
        callback: this.upCallbackGd,
        page: {
          num: 0,
          size: 20
        },
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
        noMoreSize: 5,
        toTop: {
          src: "./static/mescroll-totop.png",
          offset: 1000
        }
      },


    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
    next();
  },
  mounted(){

    // this.$nextTick(() => {
    //   this.Scroll = new BScroll(this.$refs.MoreDataP,{click: true, tap: true});
    // });
    this.curDepartment ={
      departmentName:'全企业',
      id:'0'
    }
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  methods: {
    success(){
      this.mescroll.resetUpScroll(true);
      this.showMore = false;
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 获取要跳转的页面
    /* getPageName: function(){
      // debugger
      var pageName = this.$route.query.page;
      if(pageName == 'history'){
        let pageIndex = this.$route.query.index;
        this.pageNum1 = pageIndex;
        // if(pageIndex == 0){
        //   this.show = true;
        // }
        this.index = 2;
        this.history = true;
        this.unprocessed = false;
        this.historyShow =true;
        this.historyWorkSheetList = this.list2 = this.$route.query.data;
        this.number = this.historyWorkSheetList.length;
        this.indMy = this.$route.query.index;
      }else{
        this.index = 0;
        this.history = false;
        this.unprocessed = true;
        this.historyShow =false;
        this.historyWorkSheetList = this.list2 = this.$route.query.allData;
      }
    }, */
    upCallbackGd(page, mescroll) {
      var pageName = this.$route.query.page;
      var indexType = this.$route.query.indexType;
      var typeNum = this.$route.query.typeNum;
      // this.index = this.$route.query.index;
      // console.log("this.index :====>",this.index);
      let indexNum = this.index;
      if((pageName == 'history'||pageName == 'unprocessed')&&indexNum==2){
        // let pageIndex = this.$route.query.index;
        // this.index = 2;
        this.pageNum1 = indexNum;
        this.history = true;
        this.unprocessed = false;
        this.historyShow =true;
        if(indexType==1 ||typeNum==2){
          let params = {
            pageNum: page.num,
            pageSize: page.size,
            departmentId:this.departmentId,
            deviceName:this.deviceName,
            deviceCode:this.deviceCode,
            componentName:this.componentName,
            componentCode:this.componentCode,
            workSheetNo:this.workSheetNo,
            workSheetType: this.ind,
            workSheetPriority:this.indPriority,
            type:this.indMy,
          };
          this.$http(this.$API.workSheetInfo, params, true).then(res => {
            if (res.content) {
              let data = res.content;
              this.number = res.totalElements;
              if (page.num === 1) {
                this.historyWorkSheetList = [];
              }
              this.historyWorkSheetList = this.list2 = this.historyWorkSheetList.concat(data);
              let listHistory = this.historyWorkSheetList;
              localStorage.setItem("workSheetList",JSON.stringify(listHistory));
              this.tabList1 = this.historyWorkSheetList;
              this.$nextTick(() => {
                if(res.pageNum === res.totalPages){
                  mescroll.endSuccess(data.length,false);
                }else{
                  mescroll.endSuccess(data.length);
                }
              });
            } else {
              this.mescroll.endErr();
            }
          });
        }else if(indexType==3||typeNum==2){
           this.historyShow =false;
           let params = {
            pageNum: page.num,
            pageSize: page.size,
            departmentId:this.departmentId,
            deviceName:this.deviceName,
            deviceCode:this.deviceCode,
            componentName:this.componentName,
            componentCode:this.componentCode,
            workSheetNo:this.workSheetNo,
            workSheetType: this.ind,
            workSheetPriority:this.indPriority,
             type:this.indMy,
          };
          this.$http(this.$API.mySubmitWorkSheets, params, true).then(res => {
            if (res.content) {
              let data = res.content;
              this.number = res.totalElements;
              if (page.num === 1) {
                this.historyWorkSheetList = [];
              }
              this.historyWorkSheetList = this.list2 = this.historyWorkSheetList.concat(data);
              this.$nextTick(() => {
                if(res.pageNum === res.totalPages){
                  mescroll.endSuccess(data.length,false);
                }else{
                  mescroll.endSuccess(data.length);
                }
              });
            } else {
              this.mescroll.endErr();
            }
          });
        }else if(indexType==4||typeNum==2){
           this.historyShow =false;
           let params = {
            pageNum: page.num,
            pageSize: page.size,
            departmentId:this.departmentId,
            deviceName:this.deviceName,
            deviceCode:this.deviceCode,
            componentName:this.componentName,
            componentCode:this.componentCode,
            workSheetNo:this.workSheetNo,
            workSheetType: this.ind,
            workSheetPriority:this.indPriority,
            type:this.indMy,
          };
          this.$http(this.$API.myFinishedWorkSheets, params, true).then(res => {
            if (res.content) {
              let data = res.content;
              this.number = res.totalElements;
              if (page.num === 1) {
                this.historyWorkSheetList = [];
              }
              this.historyWorkSheetList = this.list2 = this.historyWorkSheetList.concat(data);
              this.$nextTick(() => {
                if(res.pageNum === res.totalPages){
                  mescroll.endSuccess(data.length,false);
                }else{
                  mescroll.endSuccess(data.length);
                }
              });
            } else {
              this.mescroll.endErr();
            }
          });
        }
        // this.historyWorkSheetList = this.list2 = this.$route.query.data;
        // this.number = this.historyWorkSheetList.length;

        // this.indMy = this.$route.query.index;
      }else if(pageName == 'history'&&indexNum==0){
        if(indexNum==0){
          this.index = 0;
          this.history = false;
          this.unprocessed = true;
          this.historyShow =false;
          let params = {
            pageNum: page.num,
            pageSize: page.size,
            departmentId:this.departmentId,
            deviceName:this.deviceName,
            deviceCode:this.deviceCode,
            componentName:this.componentName,
            componentCode:this.componentCode,
            workSheetNo:this.workSheetNo,
            workSheetType: this.ind,
            workSheetPriority:this.indPriority,
          };
          this.$http(this.$API.loadToDealWorkSheet, params, true).then(res => {
            if (res.content) {
              let data = res.content;
              this.number = res.totalElements;
              if (page.num === 1) {
                this.workSheetList = [];
              }
              this.workSheetList = this.workSheetList.concat(data);
              let list = this.workSheetList;
              localStorage.setItem("toDealWorkSheetList",JSON.stringify(list));
              this.$nextTick(() => {
                if(res.pageNum === res.totalPages){
                  mescroll.endSuccess(data.length,false);
                }else{
                  mescroll.endSuccess(data.length);
                }
              });
            } else {
              this.mescroll.endErr();
            }
          });
        }
      }else{
         if(indexNum==0){
          // this.index = 0;
          this.history = false;
          this.unprocessed = true;
          this.historyShow =false;
          // this.historyWorkSheetList = this.list2 = this.$route.query.allData;
          let params = {
            pageNum: page.num,
            pageSize: page.size,
            departmentId:this.departmentId,
            deviceName:this.deviceName,
            deviceCode:this.deviceCode,
            componentName:this.componentName,
            componentCode:this.componentCode,
            workSheetNo:this.workSheetNo,
            workSheetType: this.ind,
            workSheetPriority:this.indPriority,
          };
          this.$http(this.$API.loadToDealWorkSheet, params, true).then(res => {
            if (res.content) {
              let data = res.content;
              this.number = res.totalElements;
              if (page.num === 1) {
                this.workSheetList = [];
              }
              this.workSheetList = this.workSheetList.concat(data);
              let list = this.workSheetList;
              localStorage.setItem("toDealWorkSheetList",JSON.stringify(list));
              this.$nextTick(() => {
                if(res.pageNum === res.totalPages){
                  mescroll.endSuccess(data.length,false);
                }else{
                  mescroll.endSuccess(data.length);
                }
              });
            } else {
              this.mescroll.endErr();
            }
          });
        }
      }
    },

    changeGongdan(){
        this.$router.push({name: 'workSheetHomePage'});
    },
    tabClick (param) {
      this.index = param;
      if(param == 0){
        this.scrollName = 'me_scroll';
        this.historyShow = false;
        this.list2 = this.workSheetList;
        this.number = this.workSheetList.length;
        this.show = false;
        this.curDepartment = this.curDepartment;
        this.mescroll.resetUpScroll(true);
      }else if(param == 2){
        this.scrollName = 'record_scroll';
        this.historyShow = true;
        this.list2 = this.historyWorkSheetList;
        this.number = this.historyWorkSheetList.length;
        if(this.pageNum1 === 0){
          this.show = true;
        }
        this.curDepartment = this.curDepartment;
        this.mescroll.resetUpScroll(true);
      }
    },

    // 排序
    sort(type, sorted, sortnumber) {
      if (sorted === false) {
        this.sort1 = true;
        this.sortType = 'workSheetTime';
        this.list2.sort(this.compare(this.sortType));
      } else {
        this.sort1 = false;
        this.sortType = 'workSheetTime';
        this.list2.sort(this.compare2('workSheetTime'));
      }
    },
    compare(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x>y)?-1:(x<y)?1:0)
      }
    },
    compare2(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x<y)?-1:(x>y)?1:0)
      }
    },
    change(attr) {
      this.changeBlack = attr;
     },
    changeBgc: function (index) {
      this.ind = index
    },
    changePriority:function(index){
      this.indPriority = index
    },

    changeMy: function (index) {
      this.indMy = index
    },
    // showVuePopup3(flag) {
    //   if (flag === false){
    //     this.showMore = false;
    //     this.activestyle = ''
    //   }
    //   this.show3 = flag;
    //   },
    //切换部门
    changeDep: function () {
      this.showDep = true;
      this.showMore = false;
    },
    //
    changeM (val, label) {
      if (this.checkDep != this.radioValue){
        if(val[0]){
          this.showDep = false;
        }
        this.checkDep = val[0];
      }
    },
    //展开更多
    changeMore: function () {
      this.showMore = true;
      this.showDep = false;

      this.show3 = true;
      this.activestyle = 'changeM'
    },
/*
    // 筛选工单
    overBtn: function () {
      if(this.index == 0){
        this.unfinishCatch = []
        for(var item of this.unprocessedWorkSheet){
          if(!!this.deviceName){
            if(!item.deviceName){
              continue;
            }else if(!!this.deviceName && (item.deviceName).indexOf(this.deviceName) < 0){
              continue;
            }
          }

          if(!!this.deviceCode){
            if(!item.deviceCode){
              continue;
            }else if(!!this.deviceCode && (item.deviceCode).indexOf(this.deviceCode) < 0){
              continue;
            }
          }

          if(!!this.componentName){
            if(!item.componentName){
              continue;
            }else if(!!this.componentName && (item.componentName).indexOf(this.componentName) < 0){
              continue;
            }
          }

          if(!!this.componentCode){
            if(!item.componentCode){
              continue;
            }else
            if(!!this.componentCode && (item.componentCode).indexOf(this.componentCode) < 0){
              continue;
            }
          }
          if(!!this.workSheetNo){workSheetNo
            if(!item.workSheetNo){
              continue;
            }else
            if(!!this.workSheetNo && (item.workSheetNo).indexOf(this.workSheetNo) < 0){
              continue;
            }
          }

          if(this.ind !=0 && this.ind != item.workSheetType){
            continue;
          }
          if(this.indPriority !=0 && this.indPriority != item.workSheetPriority){
            continue;
          }

          this.unfinishCatch.push(item)
        }
        this.workSheetList = this.unfinishCatch;
        this.showMore = false;
      }else if(this.index == 2){
        var dataList = [];
        if(this.indMy == 0){
          dataList = this.allWorkSheet;
        }else if(this.indMy == 1){
          dataList = this.mySubmitWorkSheet;
        }else if(this.indMy == 2){
          dataList = this.myFinishedWorkSheet;
        }

        this.historyCatch = [];
        for(var item of dataList){
          if(!!this.deviceName && item.deviceName.indexOf(this.deviceName) <0){
            continue;
          }
          if(!!this.deviceCode && item.deviceCode.indexOf(this.deviceCode) <0){
            continue;
          }
          if(!!this.componentName && item.componentName.indexOf(this.componentName) <0){
            continue;
          }
          if(!!this.componentCode && item.componentCode.indexOf(this.componentCode) <0){
            continue;
          }
          if(!!this.workSheetNo && item.workSheetNo.indexOf(this.workSheetNo) <0){
            continue;
          }
          if(this.ind != '0' && parseInt(this.ind) != item.workSheetType){
            continue;
          }
          if(this.indPriority != '0' && parseInt(this.indPriority) != item.workSheetPriority){
            continue;
          }
          this.historyCatch.push(item)
        }
        this.historyWorkSheetList = this.historyCatch;
        this.number = this.historyWorkSheetList.length;
        this.showMore = false;
      }
    }, */

    handleDeviceDetail: function(deviceDetail){
      this.$store.commit('changeDeviceMessage',deviceDetail);
      this.getDeviceDetail();
    },

    // 部门选择
    handleDepartment: function(departmentDetail){
      this.curDepartment = departmentDetail;
      localStorage.setItem('curDepartment',JSON.stringify(departmentDetail));
      this.departmentId = departmentDetail.id;
      this.mescroll.resetUpScroll(true);
    },
    // 运维工单总量
    loadWorkSheetInfo: function(){
     /*  this.$http(this.$API.workSheetInfo, {departmentId:this.departmentId},true).then((data)=>{
        debugger
        if(data.workSheets){
          this.allWorkSheet = data.workSheets;
        }
        this.list2 = this.allWorkSheet;
        this.workSheetTotal = this.allWorkSheet.length;
        if(this.pageNum1 == 0){
          this.historyWorkSheetList = this.list2 = this.allWorkSheet;
          this.number = this.historyWorkSheetList.length
        }
      }) */
    },
    // 部门下未完成工单
/*     loadUndealWorkSheets: function(){
      this.$http(this.$API.loadToDealWorkSheet, {},true).then((data)=>{
        if(data){
          if(data.workSheets){
            this.unprocessedWorkSheet = this.workSheetList = data.workSheets;
          }
        }else{
          this.unprocessedWorkSheet = this.workSheetList = []
        }
        if(this.index == 0){
          this.list2 = this.unprocessedWorkSheet;
          this.number = this.unprocessedWorkSheet.length;
        }
        this.toDealWorkSheetNum = this.unprocessedWorkSheet.length;
      })
    }, */

    // 历史工单记录
    getHistoryWorkSheet: function(){
      var params = {
        departmentId: this.userInfo.deparment.id
      }
      this.$http(this.$API.loadHistoryWorkSheet, params, true).then((data)=>{
        this.historyRecord = data;
      })
    },
    // 我回复过的工单
    getMyWorkSheets: function(){
      this.$http(this.$API.loadMyWorkSheet,{},true).then((data)=>{
        if(data.workSheets){
          this.myWorkSheetList = data.workSheets
        }
      })
    },

    workSheetDetail: function(item,type){
      this.$router.push({
        name:'workOrderDetails',
        query:{
          item:item,
          type:type
        }
      })
    },

    // 添加工单处理
    chooseLeader: function(data){
      this.$router.push({
        name: 'submitWorkOrder',
        query:{
          workSheet:data
        }
      })
    },

/*     // 我提交工单
    loadMyWorkSheets: function(){
      this.$http(this.$API.mySubmitWorkSheets, {},true).then((data)=>{
        if(data){
          this.mySubmitWorkSheet = data.workSheets
        }
        this.mySubmitWorkSheetNum = this.mySubmitWorkSheet.length;
      })
    },
    // 我完结的工单
    loadFinishedWorkSheets: function(){
      this.$http(this.$API.myFinishedWorkSheets, {},true).then((data)=>{
        if(data){
          this.myFinishedWorkSheet = data.workSheets
        }
        this.myFinishedWorkSheetNum = this.myFinishedWorkSheet.length;
      })
    }, */

    reset:function(){
      this.deviceName = '';
      this.deviceCode = '';
      this.componentName = '';
      this.componentCode = '';
      this.workSheetNo = '';
      this.indPriority = 0;
      this.ind = 0;
      this.indMy = 0;
    }
  },
  created: function(){
    this.userInfo = request.getUserInfo();
    if (!this.userInfo) {
        this.$http(this.$API.getUserInfo, true).then((res) => {
            if(res){
                this.userInfo = res;
            }
        })
    };



    // this.getHistoryWorkSheet();
    // this.loadUndealWorkSheets();
    // this.getPageName();
    this.getMyWorkSheets();
    // this.loadMyWorkSheets();
    // this.loadFinishedWorkSheets();
    this.loadWorkSheetInfo();
      }
}
</script>

<style lang="less" scoped>
  @import '../../styles/iconfont.css';
  .deivceTop{
    width: 100%;
    height: 50px;
    background: #22233f;
    .changeDep{
        width: 32%;
        height: 50px;
        font-size: 20px;
        /*padding: 10px 0 0 10px;*/
        color: #ffffff;
    }
    .changeDep /deep/ .header .header-content{
          margin-right: 0%;
    }
    .backTo{
      position: absolute;
      right: -38px;
      top: 16px;
    }
    .changeMore{
      width:40%;
      height: 50px;
      font-size: 16px;
      line-height: 50px;
      padding-left:10px;
      color: #ffffff;
      text-align: center;
      display:flex;
      justify-content:center;
      align-items:center;

      span{
        font-size: 17px;
      }
    }
    div{
      width: 20%;
      float: left;
      height: 50px;
      vertical-align: middle;
      img{
          width: 20px;
          height: 20px;
          padding: 15% 0;
      }
    }
     .vux-table td, .vux-table th:nth-child(1){
        float: right !important;
        width: 36% !important;
      }
    .xw /deep/ .vux-table.vux-table-no-cell-bordered{
      .vux-table td, .vux-table th:nth-child(1){

        float: left !important;
        width: 36% !important;
      }
      th td:nth-child(2){
        width: 11% !important;
      }
      th td:nth-child(3){
        width: 42% !important;
      }
      th td:nth-child(4){
        width: 12% !important;
        float: right !important;
      }

    }
  /*  .orderRecord .sw /deep/ .vux-table{
   th td:nth-child(1){
      float: left;
      width: 36%;
    }
    th td:nth-child(2){
      width: 11%;
    }
    th td:nth-child(3){
      width: 42%;
    }
    th td:nth-child(4){
      width: 12%;
      float: right;
    }
  } */
}
  .DepData{
      position: absolute;
      width: 100%;
      z-index: 99;
    }
  .DepDataStyle{
      height: 50px;
      width: 90%;
      margin: 0 5%;
      font-size: 20px;
      text-align: left;
      line-height: 50px;
      color: #ffffff;
      border-bottom: rgba(255,255,255,0.2) 1px solid;
      .selectImg{
        width: 30px;
        height: 30px;
        float: right;
        margin: 10px;
      }
    }
  .MoreDataP{
    background: #2a2c52;
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 1.333rem;
    padding-bottom: 20px;
    overflow:auto;
    height:90%;

    .deviceName{
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .deviceCode{
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    div{
      font-size: 16px;
      line-height: 40px;
      color: #ffffff;
      margin: 10px;
      input{
        margin-left: 20px;
        text-align: left;
        color:rgba(255,255,255,.5);
        font-size: 16px;
        &::-webkit-input-placeholder{
          color:rgba(255,255,255,.5);
          font-size: 14px;
        }
      }
    }
  }
  .active{
    background-color: #3967DC;
    color: #fff;
  }
  .default{
    background-color: #ddd;
    color: #000;
  }
  .runStatusBtn button{
    font-size: 16px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    /*width: 84px;*/
    width: 40%;
    margin: 0 10px;
  }
  .runStatusBtn button:focus{outline: none}
  .mask {
      position: absolute;
      top: 97%;
      width: 100%;
      left: -10px;
      height: -webkit-fill-available;
      background-color: #2a2c52;
      transition: all 0.2s ease-in;
      z-index: 999;
      height: 1rem;
      margin-bottom: 0 !important;
  }
  .change{
    color: #3967DC!important;
  }
  .BtnGroup{
    display: flex;
    height: 30px;
    line-height: 30px;
    width: fit-content;
    margin-top: 20px! important;
    float: right;
  }
  .btn-reset{
    background: #3967DC;
    padding: 0 15px;
    margin: 0!important;
    height: 30px;
    line-height: 30px!important;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border-right: 1px #22233f solid;
  }
  .btn-over{
    background: #3967DC;
    padding: 0 15px;
    margin: 0!important;
    height: 30px;
    line-height: 30px!important;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
  }
  .vux-popup-mask.vux-popup-show{
      z-index: unset !important;
    }
  *{
      -ms-touch-action: unset !important;
      touch-action: unset !important;
    }
  .orderRecord
  {
    height: 100%;
    position: absolute;
  }
  .btnList{
    display: flex;
    padding-left: 0.07rem;
    margin: 0.2rem 0;
  }
  .btnList button{
    margin-left: 0.21rem;
    border: none;
    border-radius: 10px;
    background: #000;
    color: #fff;
    padding: 4px 6px;
  }
  .vux-table.vux-table-no-cell-bordered{
    background-color: #22233f!important;
    color: #fff;
  }
  .vux-table:after{
    border: none;
  }
  .orderRecord{
    background: #22233f;
    width: 100%;
  }
  .weui-tabbar{
    position: fixed;
    background: #22233f;
    color: #fff;
  }
  #allOrder{
    background: #456de6;
  }
  .vux-button-group > a{
    margin: 0 0.05rem;
    color: #fff!important;
    background: #000!important;
  }
  .vux-button-group > a.vux-button-tab-item-first{
    border-radius: 15px!important;
    padding: 0 6px;
  }
  .vux-button-group > a.vux-button-tab-item-first:after{
    border: none!important;
  }
  .vux-button-group > a.vux-button-tab-item-middle{
    border-radius: 15px!important;
    padding: 0 6px;
  }
  .vux-button-group > a.vux-button-tab-item-middle:after{
    border: none!important;
  }
  .vux-button-group > a.vux-button-tab-item-last{
    border-radius: 15px!important;
    padding: 0 6px;
    margin-right: 5px;
  }
  .vux-button-group > a.vux-button-tab-item-last:after{
    border: none!important;
  }
  .vux-button-group > a.vux-button-group-current {
      background: #456de6!important;
  }
  .weui-tabbar:before{
    border: none;
  }
  .weui-tabbar__item{
    background: #000;
    padding: 0.3rem 0 0.2rem;
  }

  .colorChange {
    background-color: #22233f;
  }
  .number{
    position: fixed;
    top: 94px;
    line-height: 30px;
    color: #fff;
    padding-left: 15px;
    width: 100%;
    z-index: 220;
    background-color:#1b1c32;
  }
  table td ul li{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .vux-table td, .vux-table th:nth-child(1){
      width: 35% !important;
    }
   .vux-table td, .vux-table th:nth-child(2){
      width: 20% !important;
    }
  .vux-table td, .vux-table th:nth-child(3){
      width: 30% !important;
    }
   .vux-table td, .vux-table th:nth-child(4){
      width: 18% !important;
    }
  .contentWrap{
      /*height: 80%;*/
    padding-top: 40px;
  }

</style>
<style>
    .organization .header{
      width: 40%;
      padding: 17px 0;
    }
    .vux-popup-dialog{
      height: 80% !important;
    }
    .vux-tab-container{
      /*position: fixed !important;*/
      /*top: 44px !important;*/
      z-index: 99;
    }
    .BtnGroup{
      display: flex;
      height: 30px;
      line-height: 30px;
      width: fit-content;
      margin-top: 20px!important;
      float: right;
    }
    .btn-reset{
      background: #3967DC;
      padding: 0 15px;
      margin: 0!important;
      height: 30px;
      line-height: 30px!important;
      border-bottom-left-radius: 15px;
      border-top-left-radius: 15px;
      border-right: 1px #22233f solid;
    }
    .btn-over{
      background: #3967DC;
      padding: 0 15px;
      margin: 0!important;
      height: 30px;
      line-height: 30px!important;
      border-bottom-right-radius: 15px;
      border-top-right-radius: 15px;
    }
    .vux-popup-mask.vux-popup-show{
      z-index: unset !important;
    }
    *{
      -ms-touch-action: unset !important;
      touch-action: unset !important;
    }
    body{
        background-color: #22233f;
        height: 100%;
        width: 100%;
    }
    .main_wrap{
        margin: 0 auto;
        height: 100%;
        width: 100%;
        padding-bottom: unset !important;
    }
    .footer{
        position: fixed;
        bottom:0;
        left: 0;
        right:0;
        width: 100%;
        touch-action: none !important;
        /*padding-bottom: 5px;*/
    }
    .footer .weui-grid:after{
        border-bottom: none;
    }
    .footer .weui-grids:before{
        border-top: none;
    }
    .weui-grid{
        padding:0px 10px 0px 10px !important;
    }
    .footer .add_wrap{
        margin-bottom: 10px;
        text-align: center;
    }
    .footer .add_wrap button{
        border-radius: 20px;
        font-size: 16px;
        height: 45px;
        width: 50%;
        border: none;
        background-color: #456de6;
        color:#fff;

    }
    .footer .weui-grid__label{
        color: #fff;
    }

    .vux-tab{
        background-color: #22233f !important;
    }
    .vux-swiper{
        color: #fff;
    }
    .vux-swiper-item{
        overflow:auto;
    }
    .tab_wrapper .vux-tab-ink-bar{
        background: #456de6 !important;
    }
    .vux-tab .vux-tab-item.vux-tab-selected{
      color: #456de6 !important;;
    }
    .weui-tabbar{
        background-color: #22233f !important;
    }
    /* .sw /deep/ .dclTab{
     color:red;
    } */

    .process_btn{
      background-color: #22233f;
      border: none;
      color: #456de6;
      padding: 5px;
    }
    .tab_wrapper{
      /* position: fixed;
      z-index: 999;
      top:0px; */
    }
    .menu_bar{
      position:fixed;
      top:0px;
      width: 100%;
      z-index:999;
    }
    .sw,.xw{
      margin-top: 125px;
    }
    /* .xw .vux-table td, .vux-table th:nth-child(1){
      width: 35% !important;
    }
    .xw .vux-table td, .vux-table th:nth-child(2){
      width: 20% !important;
    }
    .xw .vux-table td, .vux-table th:nth-child(3){
      width: 30% !important;
    }
    .xw .vux-table td, .vux-table th:nth-child(4){
      width: 18% !important;
    } */
</style>
